<template>
  <PageWrapper contentFullHeight>
    <CollapseContainer title="Select基础用例">
      <BasicForm @register="register" @submit="handleSubmit" @reset="handleReset" />
    </CollapseContainer>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicForm, FormSchema, useForm } from '@/components/Form';
  import { CollapseContainer } from '@/components/Container';
  import { PageWrapper } from '@/components/Page';

  import { useMessage } from '@/hooks/web/useMessage';
  import { optionsListApi } from '@/api/demo/select';

  const { createMessage } = useMessage();

  // prettierrc-ignore
  let options: any[] = [
    { label: '可选A', value: '1' },
    { label: '必选B', value: '2' },
    { label: '可选C', value: '3' },
    { label: '选项D', value: '4' },
    { label: '可选E', value: '5' },
    { label: '选项F', value: '6' },
    { label: '可选G', value: '7' },
  ];

  // 字段信息
  // prettierrc-ignore
  const schemas: FormSchema[] = [
    {
      field: 'field11',
      component: 'ApiSelect',
      label: '单选-预加载',
      colProps: {
        span: 8,
      },
      componentProps: {
        placeholder: '不支持搜索',
        api: optionsListApi,
        params: {
          id: 1,
        },
        resultField: 'list', // 网络结果为: {code:0, message:{}, data:{list:[{},{}]}} 格式，如果没有list，直接写 data 即可
        labelField: 'name', // 选项展示名称: list 元素中每个对象的属性
        valueField: 'id', // 选项值字段: list 元素中每个对象的属性
        optionFilterProp: 'label', // 过滤字段
        showSearch: true, // 是否可筛选
        onChange: (e, v) => {
          console.log('ApiSelect====>:', e, v);
        },
        // atfer request callback
        onOptionsChange: (options) => {
          console.log('get options', options.length, options);
        },
      },
    },
    {
      field: 'field12',
      component: 'ApiSelect',
      label: '单选-预加载-检索',
      colProps: {
        span: 8,
      },
      componentProps: {
        placeholder: '支持搜索',
        api: optionsListApi,
        params: {
          id: 1,
        },
        resultField: 'list', // 网络结果为: {code:0, message:{}, data:{list:[{},{}]}} 格式，如果没有list，直接写 data 即可
        labelField: 'name', // 选项展示名称: list 元素中每个对象的属性
        valueField: 'id', // 选项值字段: list 元素中每个对象的属性
        immediate: true, // 立即加载 还是 等点击时加载
        optionFilterProp: 'label', // 过滤字段
        showSearch: true, // 是否可筛选
        onChange: (e, v) => {
          console.log('ApiSelect====>:', e, v);
        },
        // atfer request callback
        onOptionsChange: (options) => {
          console.log('get options', options.length, options);
        },
      },
    },
    {
      field: 'field13',
      component: 'ApiSelect',
      label: '单选-实时加载',
      colProps: {
        span: 8,
      },
      componentProps: {
        placeholder: '不支持搜索',
        api: optionsListApi,
        params: {
          id: 1,
        },
        resultField: 'list', // 网络结果为: {code:0, message:{}, data:{list:[{},{}]}} 格式，如果没有list，直接写 data 即可
        labelField: 'name', // 选项展示名称: list 元素中每个对象的属性
        valueField: 'id', // 选项值字段: list 元素中每个对象的属性
        immediate: false, // 立即加载 还是 等点击时加载
        optionFilterProp: 'label', // 过滤字段
        showSearch: true, // 是否可筛选
        onChange: (e, v) => {
          console.log('ApiSelect====>:', e, v);
        },
        // atfer request callback
        onOptionsChange: (options) => {
          console.log('get options', options.length, options);
        },
      },
    },
    {
      field: 'field21',
      component: 'ApiSelect',
      label: '多选-预加载-检索',
      required: true,
      componentProps: {
        api: optionsListApi,
        params: {
          id: 1,
        },
        resultField: 'list', // 网络结果为: {code:0, message:{}, data:{list:[{},{}]}} 格式，如果没有list，直接写 data 即可
        labelField: 'name', // 选项展示名称: list 元素中每个对象的属性
        valueField: 'id', // 选项值字段: list 元素中每个对象的属性
        immediate: true, // 立即加载 还是 等点击时加载
        optionFilterProp: 'label', // 过滤字段
        showSearch: true, // 是否可筛选
        mode: 'multiple',
        onChange: (e, v) => {
          console.log('ApiSelect====>:', e, v);
        },
        // atfer request callback
        onOptionsChange: (options) => {
          console.log('get options', options.length, options);
        },
      },
      colProps: {
        span: 8,
      },
    },
    {
      field: 'field22',
      component: 'ApiSelect',
      label: '多选-预加载-3个',
      required: true,
      componentProps: {
        api: optionsListApi,
        params: {
          id: 1,
        },
        resultField: 'list', // 网络结果为: {code:0, message:{}, data:{list:[{},{}]}} 格式，如果没有list，直接写 data 即可
        labelField: 'name', // 选项展示名称: list 元素中每个对象的属性
        valueField: 'id', // 选项值字段: list 元素中每个对象的属性
        immediate: true, // 立即加载 还是 等点击时加载
        optionFilterProp: 'label', // 过滤字段
        showSearch: true, // 是否可筛选
        maxTagCount: 3, // 最多显示3个
        mode: 'multiple',
        onChange: (e, v) => {
          console.log('ApiSelect====>:', e, v);
        },
        // atfer request callback
        onOptionsChange: (options) => {
          console.log('get options', options.length, options);
        },
      },
      colProps: {
        span: 8,
      },
    },
  ];

  const [register] = useForm({
    labelWidth: 120,
    schemas,
    actionColOptions: { span: 24 },
    fieldMapToTime: [['fieldTime', ['startTime', 'endTime'], 'YYYY-MM']],
  });

  const keyword = ref<string>('');

  // 重置方法
  function handleReset() {
    keyword.value = '';
  }

  // 提交方法
  function handleSubmit(values: any) {
    console.log('values', values);
    createMessage.success('click search,values:' + JSON.stringify(values));
  }
</script>
